"
<template>
  <CompOperate
      :field="field"
      :designer="designer"
      :design-state="designState"
      :parent-list="parentList"
      :parent-widget="parentWidget"
      :sub-form-row-id="subFormRowId"
      :sub-form-row-index="subFormRowIndex"
      :sub-form-col-index="subFormColIndex"
      :index-of-parent-list="indexOfParentList"
      :display-style="field['options'].displayStyle"
  >
    <div class="scene-DRC-info-widget" :style="getStyle('head')">
      <!--科室信息:1-科室 2-号别 3-诊室-->
      <div class="dept-room-register" :class="getDeptClassName" :style="getStyle('deptRoomRegister')">
        <div class="dept item" v-if="optionsInfo?.checkList?.includes(1)">
          <ScrollX>
            {{ getRoomDiffInfo || '\u00a0' }}
          </ScrollX>
        </div>
        <div class="register item" v-if="optionsInfo?.checkList?.includes(2)">
          <ScrollX>
            {{ getParentRegisterObjName || '\u00a0' }}
          </ScrollX>
        </div>
        <div class="room item">
          <ScrollX>
            {{ getRoomDeptInfo[optionsInfo['roomNameKey']] || getRoomDeptInfo['roomName'] || '\u00a0' }}
          </ScrollX>
        </div>
      </div>
      <template v-for="item in getRoomDoctorInfo">
        <div class="doctor-patient-wrap">
          <!--医生信息-->
          <div class="doctor-info">
            <template v-if="optionsInfo.viewMode ===1">
              <div class="doctor-info-inside"
                   :class="`doctor-info-inside-${optionsInfo.viewMode}`"
              >
                <div class="sign-info doctor-item">科室简介</div>
                <div class="describe-info doctor-item">
                  <ScrollY :content="(getRoomDeptInfo.deptIntroduction) || '\u00a0'" :pageDuration="6"/>
                </div>
              </div>
            </template>
            <template v-else-if="optionsInfo.viewMode ===2">
              <div
                  class="doctor-info-inside"
                  :class="`doctor-info-inside-${optionsInfo.viewMode}`"
              >
                <div class="doctor-info-brief">
                  <div class="doctor-picture">
                    <img :src="getDoctorPicture(item)" alt="医生" @error='handleError'/>
                  </div>
                  <div class="doctor-name-level">
                    <div class="name-wrap doctor-brief-item" :style="getStyle('doctorInfo')">
                      <div class="sign-info" :style="getStyle('doctorInfoSign')">医生</div>
                      <div class="content-info">
                        {{ (item.workerName) || '\u00a0' }}
                      </div>
                    </div>
                    <div class="level-wrap doctor-brief-item" :style="getStyle('doctorInfo')">
                      <div class="sign-info" :style="getStyle('doctorInfoSign')">职称</div>
                      <div class="content-info">
                        {{ (item.workerTitle) || '\u00a0' }}
                      </div>
                    </div>
                  </div>
                </div>
                <div class="doctor-describe">
                  <div class="sign-info doctor-item">科室简介</div>
                  <div class="describe-info doctor-item">
                    <ScrollY :content="(getRoomDeptInfo.deptIntroduction) || '\u00a0'" :pageDuration="6"/>
                  </div>
                </div>
              </div>
            </template>
            <template v-else-if="optionsInfo.viewMode ===3">
              <div
                  class="doctor-info-inside"
                  :class="`doctor-info-inside-${optionsInfo.viewMode}`"
              >
                <div class="doctor-info-brief">
                  <div class="doctor-picture">
                    <img :src="getDoctorPicture(item)" alt="医生" @error='handleError'/>
                  </div>
                  <div class="doctor-name-level">
                    <div class="name-wrap doctor-brief-item" :style="getStyle('doctorInfo')">
                      <div class="sign-info" :style="getStyle('doctorInfoSign')">医生</div>
                      <div class="content-info">{{ (item.workerName) || '\u00a0' }}</div>
                    </div>
                    <div class="level-wrap doctor-brief-item" :style="getStyle('doctorInfo')">
                      <div class="sign-info" :style="getStyle('doctorInfoSign')">职称</div>
                      <div class="content-info">
                        {{ (item.workerTitle) || '\u00a0' }}
                      </div>
                    </div>
                  </div>
                </div>
                <div class="doctor-describe">
                  <div class="sign-info doctor-item">医生简介</div>
                  <div class="describe-info doctor-item">
                    <ScrollY :content="(item.workerIntro) || '\u00a0'" :pageDuration="6"/>
                  </div>
                </div>
              </div>
            </template>
          </div>
          <!--患者信息-->
          <div class="patient-info">
            <div class="current-patient patient-item" :style="getStyle('currentPatient')">
              <div class="sign-info" :style="getStyle('currentPatientSign')">
                {{ optionsInfo?.currentPatientContent }}
              </div>
              <div class="content-info" data-info="就诊">
                <template v-if="true">
                  <vue-seamless-scroll
                      class="scroll"
                      :class-option="currentScrollOption(item?.treatingPatient || [])"
                      :ref="`current-scroll-${item.workerId}`"
                      @ScrollEnd="(e)=>handleScrollEnd(e, item)"
                      :data="getCurrentPatientList(item.treatingPatient)"
                  >
                    <div class="inside-content" :class="waitPatientNumberClassName((item.treatingPatient), true)">
                      <div class="patient"
                           v-for="currentItem in getCurrentPatientList(item.treatingPatient)"
                           :key="`${(currentItem.queuingId) || getOnlyId()}-${(currentItem.patientIdNo) || getOnlyId()}`"
                      >
                        <template v-if="!!(currentItem.orderNo)">
                          {{ currentItem.orderNo || '\u00a0' }}
                        </template>
                        <template>
                          {{ currentItem.patientName || '\u00a0' }}
                        </template>
                      </div>
                    </div>
                  </vue-seamless-scroll>
                </template>
              </div>
            </div>
            <div class="wait-patient patient-item" :style="getStyle('waitPatient')">
              <div class="sign-info" :style="getStyle('waitPatientSign')">
                {{ optionsInfo?.waitingPatientContent }}
              </div>
              <div class="content-info" data-info="候诊">
                <template v-if="true">
                  <!--(:key="optionsInfo?.waitPatientType===1&&widgetKey")==>如果不如此写控制台会报错，但是没有如何副作用-->
                  <vue-seamless-scroll
                      class="scroll"
                      :key="optionsInfo?.waitPatientType===1&&widgetKey"
                      :class-option="waitScrollOption(item?.waitingPatientList || [])"
                      :ref="`wait-scroll-${item.workerId}`"
                      @ScrollEnd="(e)=>handleScrollEnd(e, item)"
                      :data="getWaitingPatientList(item.waitingPatientList)"
                  >
                    <div class="inside-content" :class="waitPatientNumberClassName((item.waitingPatientList), true)">
                      <div class="patient"
                           v-for="waitItem in getWaitingPatientList(item.waitingPatientList)"
                           :key="`${(waitItem.queuingId) || getOnlyId()}-${(waitItem.patientIdNo) || getOnlyId()}`"
                      >
                        <template v-if="!!(waitItem.orderNo)">
                          {{ waitItem.orderNo || '\u00a0' }}
                        </template>
                        <template>
                          {{ waitItem.patientName || '\u00a0' }}
                        </template>
                      </div>
                    </div>
                  </vue-seamless-scroll>
                </template>
              </div>
            </div>
          </div>
        </div>
      </template>
    </div>
  </CompOperate>
</template>

<script>
import {debounce, debounceFn, pxToVw, throttleFn} from '@/utils/common';
import emitter from "@/utils/designer/emitter";
import {NoticeBar, Swipe, SwipeItem} from "vant";
import {buildParentApi} from "@/utils/designer/util";
import vueSeamlessScroll from 'vue-seamless-scroll';
import ScrollX from '@c/public/seamlessScroll/ScrollX.vue';
import ScrollY from '@c/public/seamlessScroll/ScrollY.vue';
import mixin from "@sc/templateDetails/modules/homeMiddle/fieldMixin";
import CompOperate from "@c/public/form-designer/devType/modules/compOperate.vue";
import {v4 as uuid} from "uuid";

let buildParent = buildParentApi();
export default {
  name: "scene-DRC-info2-widget",

  componentName: "FieldWidget", //必须固定为FieldWidget，用于接收父级组件的broadcast事件

  mixins: [emitter, mixin],

  components: {
    CompOperate,
    NoticeBar,
    Swipe,
    SwipeItem,
    ScrollY,
    ScrollX,
    vueSeamlessScroll
  },

  props: {
    widget: Object,
    devType: {
      type: Boolean,
      default: false,
    },
    field: Object,
    parentWidget: Object,
    parentList: Array,
    indexOfParentList: Number,
    designer: Object,
    designState: {
      type: Boolean,
      default: false,
    },
    subFormRowIndex: {
      /* 子表单组件行索引，从0开始计数 */ type: Number,
      default: -1,
    },
    subFormColIndex: {
      /* 子表单组件列索引，从0开始计数 */ type: Number,
      default: -1,
    },
    subFormRowId: {
      /* 子表单组件行Id，唯一id且不可变 */ type: String,
      default: "",
    },
    headTitle: {
      type: String,
      default: "",
    },
    visibleTitle: {
      type: Boolean,
    },
    //prop传入的表单JSON配置
    parentApi: {
      type: Object,
      default: () => buildParentApi()
    },
  },

  data() {
    return {
      states: true,
      timeMark: 0,
      widgetKey: uuid(),
      optionsInfo: Object(),
      pause: require("@a/images/design/pause.png"),
      header: require("@a/images/design/header.jpeg"),
      code1: require("@a/images/design/placeholder-code.png"),
    }
  },

  computed: {
    // 就诊--滚动设置
    currentScrollOption() {
      return function (row) {
        let options = Object();
        Reflect.set(options, 'hoverStop', true)
        Reflect.set(options, 'direction', 1);
        Reflect.set(options, 'isSingleRemUnit', true)
        let stepOptions = [1, 1.5, 2, 2.5, 3];
        let {waitPatientStep, waitPatientType} = (this.optionsInfo);
        switch (waitPatientType) {
          case 1:
            Reflect.set(options, 'step', stepOptions[waitPatientStep - 1])
            Reflect.set(options, 'limitMoveNum', 999999);
            break
          case 2:
            Reflect.set(options, 'step', 1)
            Reflect.set(options, 'limitMoveNum', row?.length >= 2 ? 2 : 999999);
            break
        }
        return options
      }
    },

    // 候诊列表等待--滚动设置
    waitScrollOption() {
      return function (row) {
        let options = Object();
        Reflect.set(options, 'hoverStop', true)
        Reflect.set(options, 'direction', 1);
        Reflect.set(options, 'isSingleRemUnit', true)
        let stepOptions = [1, 1.5, 2, 2.5, 3];
        let {openScroll, waitPatientStep, waitPatientScrollNumber, waitPatientType = 1} = (this.optionsInfo);
        switch (waitPatientType) {
          case 1:

            Reflect.set(options, 'step', stepOptions[waitPatientStep - 1])
            Reflect.set(options, 'limitMoveNum', openScroll ? waitPatientScrollNumber : 999999)
            break
          case 2:
            Reflect.set(options, 'step', 1)
            Reflect.set(options, 'limitMoveNum', row?.length >= 2 ? 2 : 999999)
            break
        }
        return options;
      }
    },

    // 设置的行内样式
    getStyle() {
      return function (val) {
        const self = this;
        let info = (self.optionsInfo) || Array();
        let Obj = Object();
        switch (val) {
          case 'head':
            Reflect.set(Obj, 'height', pxToVw(info.headHeight));
            Reflect.set(Obj, 'backgroundColor', `${(info.backgroundColor)}`);
            return Obj;
          case 'picture':
            Reflect.set(Obj, 'height', pxToVw(info.imageHeight));
            Reflect.set(Obj, 'width', pxToVw(info.imageWidth));
            Reflect.set(Obj, 'borderRadius', pxToVw(info.imageRadius));
            return Obj;
          case 'doctorName':
            Reflect.set(Obj, 'fontWeight', (info.doctorFontWeight) || 'normal');
            return Obj;
          case 'currentPatient':
            Reflect.set(Obj, 'background', (info.currentPatientBackground));
            return Obj;
          case 'currentPatientSign':
            Reflect.set(Obj, 'background', (info.currentPatientSignBackground));
            return Obj;
          case 'waitPatient':
            Reflect.set(Obj, 'background', (info.waitPatientBackground));
            return Obj;
          case 'waitPatientSign':
            Reflect.set(Obj, 'background', (info.waitPatientSignBackground));
            return Obj;
          case 'deptRoomRegister':
            Reflect.set(Obj, 'background', (info.deptRoomRegisterBackground));
            Reflect.set(Obj, 'color', (info.deptRoomRegisterColor));
            return Obj;
          case 'doctorInfo':
            Reflect.set(Obj, 'background', (info.doctorBackground));
            return Obj;
          case 'doctorInfoSign':
            Reflect.set(Obj, 'background', (info.doctorSignBackground));
            return Obj;
        }
      }
    },

    //生成唯一的字符串
    getOnlyId() {
      return function () {
        return uuid()
      }
    },

    // 获取顶部科室className名
    getDeptClassName() {
      let {checkList} = (this.optionsInfo);
      let length = checkList?.length || 2;
      switch (length) {
        case 1:
          return 'dept-room-register1'
        case 2:
          return 'dept-room-register-default'
      }
    },

    // 获取当前患者号别或原科室
    getParentRegisterObjName() {
      const self = this;
      let {checkList = [], registerObjNameKey, registerSource, relationRegister} = (self.optionsInfo);
      let boolean = checkList.includes(2);
      let boolean2 = checkList.includes(1);
      let listInfo = (this.getRoomDoctorInfo);
      let roomDeptInfo = (this.getRoomDeptInfo);
      if (boolean) {
        // 号别来源当前医生呼叫的患者
        if (registerSource === 2) {
          if (!!(listInfo?.length)) {
            let patientList = Array();
            if (listInfo[0]?.treatingPatient?.length) {
              patientList = listInfo[0].treatingPatient
            } else if (listInfo[0]?.preTreatingPatient?.length) {
              patientList = listInfo[0].preTreatingPatient
            } else {
              patientList = Array()
            }
            if (patientList?.length) {
              let registerObjNameInfo = Array();
              patientList.forEach((item) => {
                let temp = (item[registerObjNameKey] || item['registerObjName']);
                if (!!temp) {
                  registerObjNameInfo.push(temp)
                }
              })
              // 去重
              let registerObjName = self.$lodash.compact(registerObjNameInfo);
              if (!!registerObjName && !!(registerObjName.length)) {
                return self.$lodash.uniq(registerObjName).join(',')
              }
            } else {
              return '\u00a0'
            }
          } else {
            if (relationRegister) {
              return (roomDeptInfo?.registerObjName) || '\u00a0'
            } else {
              return '\u00a0'
            }
          }
        } else {
          // 号别来源当前医生所在科室号别
          return (roomDeptInfo?.registerObjName) || '\u00a0'
        }
      } else if (boolean2) {
        return '\u00a0'
      }
    },

    // 获取医生头像
    getDoctorPicture() {
      return function (row) {
        let isPause = (row?.isPause);
        let header = '/tpleditor/resource/assets/images/header.png';
        if (!isPause) {
          return (row.workerPicture) || header
        } else {
          return this.pause;
        }
      }
    },

    // 获取科室信息
    getRoomDeptInfo() {
      let devType = (this.devType);
      let roomDoctorInfo = this.$store.getters['getRoomDeptInfo'];
      if (devType) {
        return roomDoctorInfo.apiData;
      } else {
        return roomDoctorInfo.mockData;
      }
    },

    // 获取全量医患信息
    getRoomDoctorInfo() {
      let devType = (this.devType);
      let roomDoctorInfo = this.$store.getters['getRoomDoctorInfo'];
      let list = devType ? (roomDoctorInfo.apiData) : (roomDoctorInfo.mockData)
      if (!!(list?.length)) {
        return list.slice(0, 1);
      } else {
        return [{}];
      }
    },

    // 科室可能因为医生是否登录会有差异
    getRoomDiffInfo() {
      let list = (this.getRoomDoctorInfo);
      let deptInfo = (this.getRoomDeptInfo)
      if (list?.length) {
        return list[0].deptName || deptInfo?.deptName || '\u00a0'
      } else {
        return deptInfo?.deptName || '\u00a0'
      }
    },

    // 就诊患者
    getCurrentPatientList() {
      return function (row) {
        let type = (this.waitPatientTypeInfo);
        switch (type) {
          case 1:
            return (!!row && !!(row?.length)) ? row.slice(0, 1) : []
          case 2:
            return (!!row && !!(row?.length)) ? row.slice(0) : []
        }
      }
    },

    // 候诊患者截取
    getWaitingPatientList() {
      return function (row) {
        let {waitPatientType, waitMode} = (this.optionsInfo);
        switch (waitPatientType) {
          case 1:
            return (!!row && !!(row?.length)) ? row.slice(0, waitMode) : []
          case 2:
            return (!!row && !!(row?.length)) ? row.slice(0) : []
        }
      }
    },

    // 诊室等待--设置不同模式下的等待患者样式
    getPatientClassName() {
      let {waitMode, waitingPatientHide} = (this.optionsInfo);
      return function (type) {
        if (!waitingPatientHide) {
          switch (type) {
            case 'current-patient':
              return parseInt(waitMode) !== 1 ? 'current-patient' : 'current-patient2'
            case 'wait-patient':
              switch (waitMode) {
                case 1:
                  return 'wait-patient'
                case 2:
                  return 'wait-patient2'
                case 3:
                  return 'wait-patient3'
                case 4:
                  return 'wait-patient4'
                case 5:
                  return 'wait-patient5'
                case 6:
                  return 'wait-patient6'
              }
          }
        } else {
          return 'hide-waiting-patient'
        }
      }
    },

    // 判断当前患者是否滚动
    scrollStateInfo() {
      return function (info, type) {
        switch (type) {
          case 'current':
            return (info?.treatingPatient?.length) > 1
          case 'wait':
            return (info?.waitingPatientList?.length) > 1
        }
      }
    },

    // 候诊列表的模式
    waitPatientTypeInfo() {
      // 1:候诊等待 2:候诊列表
      let {waitPatientType = 1} = this.optionsInfo;
      return waitPatientType
    },

    // 候诊等待-真实数量-className名称
    waitPatientNumberClassName() {
      return function (row, scroll) {
        let waitingPatientList = this.getWaitingPatientList(row);
        if (scroll) {
          if (Array.isArray(waitingPatientList)) {
            if (waitingPatientList?.length >= 2) {
              return `scroll-area-group`
            } else {
              return `scroll-area-default`
            }
          } else {
            return `scroll-area-default`
          }
        } else {
          if (Array.isArray(waitingPatientList)) {
            if (waitingPatientList.length >= 6) {
              return `no-scroll-area-6`
            } else {
              return `no-scroll-area-${waitingPatientList.length}`
            }
          } else {
            return `no-scroll-area`
          }
        }
      }
    },
  },

  created() {
    this.registerToRefList();
    this.initEventHandler();
    this.handleOnCreated();
  },

  mounted() {
    this.handleOnMounted();
  },

  methods: {
    // 接收父组件传递过来的数据
    executeMethod(key, data) {
      switch (key) {
        case "roomDeptInfo":
          this.states = true;
          this.$store.dispatch('setRoomDeptInfo', data)
          break
        case "roomDoctorInfo":
          this.states = true;
          let obj = Object();
          Reflect.set(obj, 'sign', '模板日志-医生信息');
          Reflect.set(obj, 'key', key);
          Reflect.set(obj, 'data', data);
          buildParent.executeParentMethod('writeLog', JSON.stringify(obj));
          this.$store.dispatch('setRoomDoctorInfo', this.$lodash.cloneDeep(data))
          break
      }
    },

    // 滚动结束
    handleScrollEnd() {
      console.log('handleScrollEnd')
    },

    handleError(event) {
      event.target.src = '/tpleditor/resource/assets/images/header.png'
    },

  },


  watch: {
    field: {
      handler: function (val) {
        const self = this;
        self.$nextTick(() => {
          self.widgetKey = uuid();
          let key = val.options.config;
          self.optionsInfo = val.options[key];
        })
      },
      deep: true,
      immediate: true
    }
  },

  destroyed() {
    this.unregisterFromRefList();
  },
};
</script>

<style lang="scss" scoped>
.scene-DRC-info-widget {
  padding: 28px 30px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  color: #333;
  height: 100%;
  overflow: hidden;

  .dept-room-register {
    width: 100%;
    height: 300px;
    flex-shrink: 0;
    background: #0059B3;
    border-radius: 20px;
    padding: 20px 0 20px 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    .item {
      text-align: center;
      font-size: 80px;
      padding: 0 30px;
      flex-grow: 1;
      @include singleEllipsis(100%);
    }

    .dept {
      font-size: 120px;
    }

    .register {
      font-size: 120px;
    }

    .room {
      font-size: 110px;
    }

  }

  .dept-room-register1 {
    .item {
      font-size: 160px !important;
    }
  }

  .doctor-patient-wrap {
    margin-top: 30px;
    flex-shrink: 0;
    box-sizing: border-box;

    flex-grow: 1;
    display: flex;
    flex-direction: column;

    .doctor-info {
      height: 780px;
      border-radius: 20px;
      overflow: hidden;
      flex-shrink: 0;

      .doctor-info-inside {
        display: flex;
        height: 100%;
        flex-direction: column;

      }

      // 视图一
      .doctor-info-inside-1 {
        .doctor-item {
          flex-shrink: 0;
          flex-grow: 1;
        }

        .sign-info {
          height: 120px;
          background: linear-gradient(180deg, #FFFFFF 0%, #F8F8F8 100%);
          width: 100%;
          align-content: center;
          text-align: center;
          font-weight: 500;
          font-size: 60px;
          color: #0059B3;
          border-bottom: 2px #DDDDDD solid;
        }

        .describe-info {
          height: calc(100% - 120px - 68px);
          background: white;
          width: 100%;
          font-weight: 400;
          font-size: 40px;
          padding: 34px 50px;
          box-sizing: border-box;
          text-indent: 2em;
          color: #333333;
          line-height: 1.5;
          text-align: justify;
          font-style: normal;
        }
      }

      // 视图二
      .doctor-info-inside-2 {
        .doctor-info-brief {
          width: 100%;
          flex-shrink: 0;
          background: #FFFFFF;
          border-radius: 20px;
          overflow: hidden;
          flex-grow: 1;
          border: 2px solid #DDDDDD;
          display: flex;
          padding: 30px 30px;
          box-sizing: border-box;
          flex-direction: row;

          .doctor-picture {
            height: 340px;
            width: 250px;
            overflow: hidden;
            display: flex;
            flex-shrink: 0;
            border-radius: 18px;
            box-sizing: border-box;

            img {
              height: 100%;
              width: 100%;
              object-fit: cover;
            }
          }

          .doctor-name-level {
            flex-grow: 1;
            margin-left: 64px;
            align-content: center;

            .doctor-brief-item {
              background: rgba(0, 89, 179, 0.2);
              height: 130px;
              border-radius: 18px;
              overflow: hidden;
              display: flex;
              flex-direction: row;

              .sign-info {
                align-self: center;
                align-content: center;
                align-items: center;
                font-size: 64px;
                color: #FFFFFF;
                width: 194px;
                flex-shrink: 0;
                height: calc(100%);
                line-height: 1.4;
                text-align: center;
              }

              .content-info {
                flex-grow: 1;
                flex-shrink: 0;
                margin-left: 30px;
                height: 100%;
                align-self: center;
                align-content: center;
                align-items: center;
                font-size: 64px;
                color: #333333;
                text-align: left;
              }
            }

            .name-wrap {
              .sign-info {
                background: rgba(0, 89, 179, 1);
              }
            }

            .level-wrap {
              margin-top: 32px;

              .sign-info {
                background: rgba(0, 89, 179, 1);
              }
            }
          }
        }

        .doctor-describe {
          flex-shrink: 0;
          margin-top: 30px;
          height: 366px;
          border-radius: 20px;
          overflow: hidden;
          background: #FFFFFF;

          .doctor-item {
            flex-shrink: 0;
            flex-grow: 1;
          }

          .sign-info {
            height: 100px;
            background: linear-gradient(180deg, #FFFFFF 0%, #F8F8F8 100%);
            width: 100%;
            align-content: center;
            text-align: center;
            font-weight: 500;
            font-size: 54px;
            color: #0059B3;
            border-bottom: 2px #DDDDDD solid;
          }

          .describe-info {
            height: calc(100% - 100px  - 36px);
            background: white;
            width: 100%;
            font-weight: 400;
            font-size: 40px;
            padding: 18px 44px;
            box-sizing: border-box;
            text-indent: 2em;
            color: #333333;
            line-height: 1.5;
            text-align: justify;
            font-style: normal;
          }
        }
      }

      // 视图三
      .doctor-info-inside-3 {
        .doctor-info-brief {
          width: 100%;
          flex-shrink: 0;
          background: #FFFFFF;
          border-radius: 20px;
          overflow: hidden;
          flex-grow: 1;
          border: 2px solid #DDDDDD;
          display: flex;
          padding: 30px 30px;
          box-sizing: border-box;
          flex-direction: row;

          .doctor-picture {
            height: 340px;
            width: 250px;
            overflow: hidden;
            display: flex;
            flex-shrink: 0;
            border-radius: 18px;
            box-sizing: border-box;

            img {
              height: 100%;
              width: 100%;
              object-fit: cover;
            }
          }

          .doctor-name-level {
            flex-grow: 1;
            margin-left: 64px;
            align-content: center;

            .doctor-brief-item {
              background: rgba(0, 89, 179, 0.2);
              height: 130px;
              border-radius: 18px;
              overflow: hidden;
              display: flex;
              flex-direction: row;

              .sign-info {
                align-self: center;
                align-content: center;
                align-items: center;
                font-size: 64px;
                color: #FFFFFF;
                width: 194px;
                flex-shrink: 0;
                height: calc(100%);
                line-height: 1.4;
                text-align: center;
              }

              .content-info {
                flex-grow: 1;
                flex-shrink: 0;
                margin-left: 30px;
                height: 100%;
                align-self: center;
                align-content: center;
                align-items: center;
                font-size: 64px;
                color: #333333;
                text-align: left;
              }
            }

            .name-wrap {
              .sign-info {
                background: rgba(0, 89, 179, 1);
              }
            }

            .level-wrap {
              margin-top: 32px;

              .sign-info {
                background: rgba(0, 89, 179, 1);
              }
            }
          }
        }

        .doctor-describe {
          flex-shrink: 0;
          margin-top: 30px;
          height: 366px;
          border-radius: 20px;
          overflow: hidden;
          background: #FFFFFF;
          display: flex;
          flex-direction: row;

          .doctor-item {
            flex-shrink: 0;
            flex-grow: 1;
          }

          .sign-info {
            height: 100%;
            background: linear-gradient(180deg, #FFFFFF 0%, #F8F8F8 100%);
            width: 124px;
            align-content: center;
            text-align: center;
            font-weight: 500;
            font-size: 50px;
            color: #0059B3;
            border-right: 2px #DDDDDD solid;
            align-self: center;
            align-items: center;
            flex-shrink: 0;
            letter-spacing: 20px;
            writing-mode: vertical-rl; /* 文字从上到下，从右到左排列 */
          }

          .describe-info {
            width: calc(100% - 124px);
            background: white;
            height: calc(100% - 18px);
            font-weight: 400;
            font-size: 40px;
            padding: 28px 24px;
            box-sizing: border-box;
            text-indent: 2em;
            color: #333333;
            line-height: 1.5;
            text-align: justify;
            font-style: normal;
          }
        }
      }
    }

    .patient-info {
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      height: calc(100% - 780px - 28px);
      flex-shrink: 0;
      margin-top: 28px;
      box-sizing: border-box;
      overflow: hidden;

      .patient-item {
        width: calc(100%);
        border-radius: 20px;
        overflow: hidden;
        display: flex;
        height: 206px;
        flex-direction: row;
        align-items: center;
        align-content: center;

        .sign-info {
          align-self: center;
          align-content: center;
          align-items: center;
          font-weight: 500;
          font-size: 60px;
          color: #FFFFFF;
          width: 124px;
          flex-shrink: 0;
          height: calc(100%);
          line-height: 1.4;
          text-align: center;
          letter-spacing: 4px;
        }

        .content-info {
          margin-left: 30px;
          flex-grow: 1;
          flex-shrink: 0;
          height: 100%;
          align-self: center;
          align-content: center;
          align-items: center;
          font-size: 120px;
          color: #333333;
          text-align: left;

          .scroll {
            height: 100%;

            .inside-content {
              height: 100%;
              display: flex;
              line-height: 1.68;
              flex-direction: column;
              justify-content: center;
            }

            .scroll-area-group {
              justify-content: start;
            }
          }
        }
      }

      .current-patient {
        background: rgba(0, 89, 179, 0.2);

        .sign-info {
          background: #0059B3;
        }

        .content-info {
          color: #0059B3;
        }
      }

      .wait-patient {
        margin-top: 24px;
        box-sizing: border-box;
        background: rgba(255, 198, 85, 0.2);

        .sign-info {
          background: #E58602;
        }

        .content-info {
          color: #E58602;

        }
      }
    }
  }
}
</style>
"